<template>
  <div class="hello">
    <!-- <img style="width:400px;" src="http://p0.qhimg.com/bdm/768_474_0/t019c3458c4ab4d9d65.jpg" /> -->
    <Myswiper />
    <!-- <img src="../assets/dlrb.jpg" class="center-logo" alt /> -->
    <h1 @click="login">{{ msg }}</h1>
    <div class="action_cell">
      <input type="text" name id v-model="info" class="input_box" />
      <!-- <button @click="add">添加</button>
      <button @click="del">删除</button>
      <button @click="reset">清空</button> -->
      <qui-btn @btnClickEvent="add" msg="添加" class="btn"></qui-btn>
      <qui-btn @btnClickEvent="del" msg="删除" class="btn"></qui-btn>
      <qui-btn @btnClickEvent="reset" msg="清空" class="btn"></qui-btn>
    </div>
    <p>todo-list:</p>
    <ol class="todo-item">
      <todo-item v-for="item in todoList" :key="item" :tofo="item">
        <img style="width:24px;height:14px;" src="../assets/logo.png" alt="vuelogo" slot="img" />
        <template v-slot:slotName="itemProps">
          <!-- itemProps子组件状态控制父组件状态 -->
          <span :style="{fontSize:'20px',color:itemProps.checked?'blue':'red'}">{{item}}</span>
        </template>

        <!-- 插槽形式 -->
      </todo-item>
    </ol>
  </div>
</template>

<script>
import TodoItem from "./TodoItem";
import Myswiper from "./Swiper"
import QuiBtn from './qui/QuiButton'

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "欢迎来到我的主页！",
      info: "",
      todoList: [],
      count: 0,
      
    };
  },
  components: {
    TodoItem,
    Myswiper,
    "qui-btn":QuiBtn
  },
  methods: {
    add: function() {
      console.log(this.info);
      if (this.info !== "") {
        this.todoList.push(this.info);
      } else {
        this.todoList.push("null");
      }
      this.info = ""; //添加完清空input框
    },
    del: function() {
      console.log(this.info);
      this.todoList.pop();
      this.info = ""; //添加完清空input框
    },
    reset: function() {
      console.log(this.info);
      this.todoList = [];
      this.info = ""; //添加完清空input框
    },
    login(){
      self.location="#/login";
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
h1,
h2 {
  font-weight: normal;
}
.center-logo {
  width: 400px;
}
.hello {
  text-align: center;
}
.todo-item {
    width: 100%;
}
.action_cell{
    display: flex;
    align-items: center;
    justify-content: center;
}
.input_box{
    padding: 3px;
}
.btn{
    margin-left: 5px;
}
</style>
